<template>

  <div class="hello">
    
    <van-loading v-if="a" type="spinner" vertical>加载中</van-loading>
      <van-cell-group inset>
        <van-cell v-for="item in list" :key="item.id" :title="item.bookname" />
</van-cell-group>
    
       
  
  </div>
</template>

<script>
import axios from 'axios'

import VanCell from 'vant/lib/cell';
import VanCellGroup from 'vant/lib/cell-group';
import VanLoading from 'vant/lib/loading'

export default {
  components: {
    VanCell,
    VanCellGroup,
    VanLoading
  },
  data() {
    return {
      list: [],
      loading: true,
      finished: false, 
      a:true
    };
  },
  async created () {
         const res = await axios ({
            methods:'get',
            url:'http://www.liulongbin.top:3006/api/getbooks',
          }) 
          this.list = res.data.data
          this.loading = false
          this.finished = true
          this.a = false
  }
         
  // name: "HelloWorld",
  // props: {
  //   msg: String,
  // },
  // methods: {
  //   showPopup() {
  //     this.show = true;
  //   },
  //   onLoad() {
  //     // 异步更新数据
  //     // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  //     setTimeout(() => {
  //       for (let i = 0; i < 10; i++) {
  //         this.list.push(this.list.length + 1);
  //       }

  //       // 加载状态结束
  //       this.loading = false;

  //       // 数据全部加载完成
  //       if (this.list.length >= 40) {
  //         this.finished = true;
  //       }
  //     }, 1000);
  //   },
  // },
};
</script>
 
<style scoped>
 .hello {
    background-color:red
  }

</style>
